<template>
  <div class="pd_20" v-loading="load">
    <el-row>
      <el-row>
        <el-col :span="24" class="pd_20 cx_mid_ejlm">
          <el-col :span="24" class="mt20 cx_mid_ejlm_title tl">
            <div
              class="tc cx_mid_title_tit"
              v-for="(item,index) in pluginList"
              :class="{cx_mid_title_titu:index==Lindex}"
              :key="index"
            >
              <span @click="getcateList(item,(index))">{{item}}</span>
            </div>
          </el-col>
        </el-col>
      </el-row>
      <el-row>
        <div class="pd_20 plug_box">
          <div class="cx_con_box pd_20" v-for="(item,index) in itemList" :key="index">
            <div class="pd_20 cx_mid_ejlm box_plu">
              <el-col :span="11" class="f_l" style="position:relative">
                <img src="../assets/img/iph6.png" alt />
                <img :src="$fnc.getImgUrl(item.pic)" class="plufin_img" alt />
              </el-col>
              <el-col :span="11" class="f_r tl">
                <p class="cx_con_box_title">{{item.title}}</p>
                <p class="cx_con_box_con">功能简介：{{item.desc}}</p>
                <!-- <p class="cx_con_box_jiage">￥{{item.price | keepTwoNum}}</p> -->
                <p class="plugin_btn">
                  <!-- <el-button
                    :loading="$store.state.isLoading"
                    :type="item.is_open=='1'? 'primary' :'success'"
                    @click="isOpenPlug(item.is_open,item)"
                    class="cx_con_box_an f_l"
                  >{{item.is_open=='1'? '查看' :'立即开通'}}</el-button> -->
                  <el-button
                    style="margin-right:10px"
                    :loading="$store.state.isLoading"
                    type="primary"
                    @click="share_show=true"
                    class="cx_con_box_an f_r"
                  >咨询客服</el-button>
                  <el-button
                    :loading="$store.state.isLoading"
                    type="primary"
                    class="cx_con_box_an f_r"
                    style="margin-left:0"
                    v-if="item.video !=0 && item.video != ''"
                    @click="playVideo(item)"
                  >观看视频</el-button>
                </p>
              </el-col>
            </div>
          </div>
        </div>
      </el-row>
    </el-row>

    <el-dialog title="提示" :close-on-click-modal="false" :visible.sync="dioForm" width="30%" center>
      <el-form label-position="right" label-width="80px" :model="form">
        <el-form-item label="姓名">
          <el-col :span="12">
            <el-input size="small" clearable v-model="form.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-col :span="12">
            <el-input size="small" clearable v-model="form.tel"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="$store.state.isLoading" @click="dioForm = false">取 消</el-button>
        <el-button :loading="$store.state.isLoading" type="primary" @click="dioForm = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      width="600"
      append-to-body
      custom-class="vide0-con"
      :visible.sync="showVideo"
      @close="close_video"
    >
      <video
        id="video"
        autoplay="autoplay"
        :src="$fnc.getImgVideo(itemForm.video)"
        width="600"
        height="400"
        controls="controls"
      >您的浏览器不支持视频播放</video>
    </el-dialog>

    <van-popup v-model="share_show" transition="fade" get-container="body" class="share_box_pop">
      <div class="share_box" style="position:relative">
        <img :src="imgUrl" alt style="width:100%" />
        <div class="share_box-foote">
          <span></span>
          <van-divider
            :style="{ color: '#a5a5a5', borderColor: '#c8c8c8', padding: '0',margin:'0' }"
          >保存二维码添加客服</van-divider>
          <span></span>
        </div>
        <div class="share_box-btn">
          <van-button
            round
            type="info"
            @click="uploadShare()"
            color="linear-gradient(to right, #feed3d, #ffdb18)"
          >保存二维码</van-button>
        </div>
      </div>

      <div class="upload_shaer_btn">
        <div class="tc">
          <van-icon
            @click="share_show=false"
            name="close"
            size="30px"
            color="#fff"
            style="margin-top:20px"
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>
<style lang='less'>

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s linear;
  /*transform: translate3D(0,0,0);*/
}

.fade-enter,
.fade-leave-to {
  transform: translate3D(-50%, -100%, 0);
  /*transform: translateX(10px);*/
}
.mt20 {
  margin-top: 20px;
}
.cx_top_title {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  margin-bottom: 10px;
}
.cx_top_con {
  background: #fff;
  padding: 20px 0;
}
.cx_top_con_col {
  height: 50px;
  line-height: 50px;
}
.cx_top_con_c {
  padding-left: 30px;
  font-size: 18px;
  font-weight: bold;
  color: #ff4673;
}
.cx_top_con_qian {
  font-size: 14px;
}
.cx_top_con_dw {
  font-weight: 100;
  color: #000;
  margin-left: 5px;
}
.cx_top_con_djzj {
  color: #33d4a0;
}
.cx_mid_title {
  height: 43px;
  display: inline-block;
  cursor: pointer;
  width: 140px;
  line-height: 43px;
  border-top: solid 2px #f2f2f2;
  color: #a1a1a1;
  background-color: #f2f2f2;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.cx_mid_titleu {
  background-color: #fff;
  border-top: solid 2px #38a9f9;
}
.cx_mid_title_tit {
  display: inline-block;
  width: 150px;
  cursor: pointer;
  border: solid 1px #e9e9e9;
  border-bottom: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-left: 15px;
}
.cx_mid_title_titu {
  color: #fff;
  font-weight: bold;
  background-color: #38a9f9;
  border: solid 1px #38a9f9;
  border-bottom: none;
}
.cx_mid_ejlm {
  background: #fff;
}
.cx_mid_ejlm_title {
  border-bottom: solid 1px #e9e9e9;
  height: 41px;
  line-height: 41px;
}
.cx_con_box {
  margin: 0 0px 45px;
  padding: 20px;
}
.cx_con_box_title {
  height: 60px;
  line-height: 60px;
}
.cx_con_box_con {
  color: #adadad;
  font-size: 12px;
  line-height: 25px;
  height: 150px;
  overflow: hidden;
}
.cx_con_box_jiage {
  height: 40px;
  line-height: 40px;
  color: #ff4673;
}
.cx_con_box_an {
  width: 45%;
  height: 30px;
  line-height: 30px;
  padding: 0;
}
.cxSwith {
  height: 25px !important;
  line-height: 25px !important;
  display: inline-block;
}
.box_plu {
  background: #fff;
  border: solid 1px #e9e9e9;
  border-radius: 20px;
  box-shadow: 0px 0px 15px #dedede;
  overflow: hidden;
}
.cxSwith > .el-switch__core {
  height: 25px !important;
  border-radius: 16px !important;
  border: 1px solid #dfdfdf !important;
}
.cxSwith > .el-switch__core:after {
  width: 20px !important;
  height: 20px !important;
  top: 2px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.cxSwith.el-switch.is-checked .el-switch__core::after {
  margin-left: -21px !important;
}
.cxSwith > .el-switch__label {
  text-indent: 5px;
}
.plufin_img {
  position: absolute;
  top: 40px;
  left: 11px;
  width: 148px;
}
.cx_mid_title_tit > span {
  display: block;
  width: 100%;
  height: 100%;
}
.plug_box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  min-width: 1300px;
}
.plug_box > div {
  width: 450px;
}
.plugin_btn {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.plugin_btn .el-button {
  margin-bottom: 10px;
}
.vide0-con {
  background-color: transparent;
  border: none;
  box-shadow: none;
  width: 600px;
}
.vide0-con .el-dialog__header {
  display: none;
}
.share_box_pop {
  width: 100%;
  height: 85%;

  background-color: transparent;
  > div {
    width: 20%;
    margin: 0 auto 0;
  }
}
.share_box {
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  margin: 0 auto;
  padding: 20px 0px;
  border-radius: 10px;

  .share_top {
    width: 40%;
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
  > p {
    font-size: 32px;
    font-weight: bold;
    line-height: 32px;
    padding: 5px 0;
  }
  .share_info {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
      font-size: 16px;
      font-weight: 400;
      margin: 0 5px;
    }
    span {
      padding: 0 5px;
      color: #ff9919;
    }
  }
  .share_wx {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    img {
      width: 18px;
    }
    p {
      font-weight: bold;
      padding-left: 10px;
      font-size: 18px;
    }
  }
  .share_ewm {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    margin: 15px 0;
    .share_ewm_img {
      width: 45%;
      img {
        width: 100%;
      }
    }
    p {
      font-size: 14px;
      font-weight: bold;
      color: #8e8e8e;
      padding: 10px 0;
    }
    img {
      width: 100%;
    }
  }
  .share_line {
    width: 80%;
    height: 2px;
    background-color: #f2f2f2;
  }
}
.share_close {
  // width: 100%;
  display: flex;
  justify-content: center;
  padding: 15px 0;
  position: absolute;
  right: 15px;
  top: 0px;
  background-color: transparent;
}
.share_close .van-icon {
  font-size: 30px;
  border-radius: 50%;
  background-color: transparent;
  border: 3px solid #ff2b05;
  color: #ff2b05;
}
.upload_shaer_btn {
  color: #fff;
  font-size: 14px;
  position: relative;
  text-align: center;
  .upload_img_ewm {
    display: block;
    width: 34px;
    margin: 0 auto;
  }
  span {
    display: inline-block;
    margin-top: 20px;
  }
}
</style>
<script>
import { Popup, Button, Divider, Icon } from "vant";
export default {
  data() {
    return {
      imgUrl: require("../assets/img/kf1.jpg"),
      share_show: false,
      showVideo: false,
      money: 0,
      s: "",
      pluginList: [],
      itemList: [],
      Lindex: "1",
      dioForm: false,
      itemForm: {
        video: "",
        title: ""
      },
      form: {
        name: "",
        tel: ""
      },
      menuList: this.$store.state.menuList,
      load: false
    };
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    [Popup.name]: Popup,
    // eslint-disable-next-line vue/no-unused-components
    [Button.name]: Button,
    // eslint-disable-next-line vue/no-unused-components
    [Divider.name]: Divider,
    // eslint-disable-next-line vue/no-unused-components
    [Icon.name]: Icon
  },
  methods: {
    uploadShare() {
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = this.imgUrl;
    },
    close_video() {
      document.getElementById("video").pause();
      // this.showVideo = false;
    },
    playVideo(item) {
      this.itemForm = item;
      this.showVideo = true;
    },
    getplugin() {
      var param = {};
      this.$api.getAdmin.getAdminPluginList1(param).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.pluginList = res.data.result;
          console.log(this.pluginList)
          this.getcateList(this.pluginList[1], 1);
        }
      });
    },
    getcateList(str, index) {
      console.log(str)
      this.load = true;
      this.Lindex = index;
      var param = {};
      param.cate = str;
      this.$api.getAdmin.getAdmincateList1(param).then(res => {
        if (res.data.code == 200) {
          this.itemList = res.data.result;
        }
        this.load = false;
      });
    },
    getTop() {},
    getItem(index) {
      this.dIndex = index;
    },
    isOpenPlug(i, item) {
      if (i == "0") {
        this.$swal({
          title: `您确定要开通${item.title}吗`,
          text: `将支付余额${item.price}开通${item.title}`,
          type: "success",
          showCancelButton: true,
          confirmButtonColor: "#409EFF",
          confirmButtonText: "是的，我要开通",
          cancelButtonColor: "#DD6B55",
          cancelButtonText: "容我三思"
        }).then(willDelete => {
          if (willDelete.value) {
            this.$api.getAdmin.open_plugin({ id: item.id }).then(res => {
              if (res.data.code == 200) {
                this.$swal("开通成功！", "您已经成功开通此模块。", "success");
                this.getplugin();
                this.get_usermoney();
                // var obj = this.menuList;
                // this.$fnc.tomenu(item.url, obj);
              } else {
                this.$swal("开通失败！", res.data.result, "error");
              }
            });
          }
        });
      } else {
        var url = item.url;
        var obj = this.menuList;
        this.$fnc.tomenu(url, obj);
      }
    }
  },
  mounted() {
    this.getplugin();
    // this.get_usermoney();
  },

};
</script>
